<template>
  <el-button v-bind="props">
    <slot>
      <!-- 默认使用 content 字段显示文字 -->
      <span>{{ content }}</span>
    </slot>
  </el-button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { PropType } from "vue";

export default defineComponent({
  name: "BaseButton",
  props: {
    type: {
      type: String as PropType<
        "primary" | "success" | "warning" | "danger" | "info"
      >,
      default: "primary",
    },
    content: {
      type: String,
      default: "按钮",
    },
    size: {
      type: String as PropType<"large" | "default" | "small">,
      default: "default",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    // 是否为文字按钮
    text: {
      type: Boolean,
      default: false,
    },
    // 是否显示文字按钮背景颜色
    bg: {
      type: Boolean,
      default: false,
    },
    // 是否为链接按钮
    link: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
    /**
     * button 默认的按钮
     * submit 触发表单的默认提交
     * reset 表单的默认重置
     */
    nativeType: {
      type: String as PropType<"button" | "submit" | "reset">,
      default: "button",
    },
    // 自动在两个中文字符之间插入空格
    autoInsertSpace: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    return {
      props,
    };
  },
});
</script>
